<template>
	<view>
	<uni-popup ref="food_car" type="bottom" class="z-99" @change="set_show_car">
		<view class="w-100 h824 rounded-top-left-54 ov-hd">
			<view class="w-100 h160 bg-f8ff">
				<view class="w-100 h-100 bg-theme f-b-c rounded-bottom-54 t-0 font25 font500 px-2-6">
					<view class="ml-2">已选商品</view>
					<view class="w200 h64 f-c-c circle20 bg-f8ff" @click="clear_car">清空购物车</view>
				</view>
			</view>
			<view class="w-100 h664 bg-theme">
				<view class="w-100 h-100 bg-f8ff rounded-right-54 re">
					<scroll-view class="scroll-view_H uni-scroll" scroll-y="true" scroll-with-animation>
						<view class="px-5 f-b-c h156 py-2 border-bottom" v-for="(item,index) in food_car" :key="item.id">
							<view class="f-y-s">
								<ImageFile :url="item.pic" className="w116 h116 circle12"/>
								<view class="pl-2 h116 fs-b-b w380 font600 t-20">
									<view class="w-100 font32">{{item.title}}</view>
									<view class="w-100 font28"><text class="font20 font400">¥</text>{{item.price}}</view>
								</view>
							</view>
							<view class="f-b-c">
								<view class="w64 h64 f-c-c" @click="set_reduce(item,index)" v-if="item.number">
									<view class="w40 h40 font40 font600 rounded-circle f-c-c pb-1" :class="item.number <= 0?'t-3':'t-20 bg-theme'">-</view>
								</view>
								<view class="px-2 h64 font28 font500 t-20 f-c-c" v-if="item.number > 0">{{item.number}}</view>
								<view class="w64 h64 f-c-c" @click="set_add(item,index)">
									<view class="w40 h40 font40 font600 rounded-circle t-20 f-c-c pb-1 bg-theme">+</view>
								</view>
							</view>
						</view>
						<view v-if="food_number <= 0" class="w-100 py-6 font28 t-20 t-a">暂无数据</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</uni-popup>
	<!-- 提示窗示例 -->
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog class="bg-theme" cancelText="取消" confirmText="确定" title="通知" content="确定要清空购物车吗？" @confirm="dialogConfirm"
			@close="dialogClose"></uni-popup-dialog>
	</uni-popup>
	</view>
</template>

<script>
	import {mapState,mapActions} from "vuex"
	export default{
		data(){
			return{
				show_car:false,
			}
		},
		computed: {
			...mapState('food', ['food_number','food_money','food_car'])
		},
		mounted() {
		},
		methods:{
			...mapActions('food', ["set_change_food_shop_car",'set_clear_food_shop_car']),
			get_purchass(){
				uni.navigateTo({
					url:"/pages/food/purchass"
				})
			},
			set_show_car(val){
				this.show_car = val.show
			},
			car_info(){
				if(this.show_car){
					this.$refs.food_car.close()	
				}else{
					this.$refs.food_car.open()	
				}
			},
			set_reduce(obj){
				let data = {
					id:obj.id
				}
				// 新增才有 obj 参数 购物车中数量少于1 做删除 
				data.type = obj.number <= 1 ? "delete" : "reduce"
					
				this.set_change_food_shop_car(data)
			},
			set_add(obj){
				let data = {
					id:obj.id,
					type:"plus"
				}
				this.set_change_food_shop_car(data)
			},
			// 清空购物车
			clear_car(){
				this.$refs.alertDialog.open()
			},
			dialogConfirm(){
				this.set_clear_food_shop_car()
			},
			dialogClose(){
				this.$refs.alertDialog.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.ty-car{
		right: -24rpx;
	}
	.scroll-view_H{
		position: absolute;
		top: 20rpx;
		left: 0;
		bottom: 170rpx;
		right: 0;
		z-index: 9;
	}
	.rounded-top-left-54{
		border-radius:  54rpx 54rpx 0 0;
	}
	.h824{
		height: 824rpx;
	}
</style>
